<template>
  <HerinContainer class="MainCoal-box" :delay="1" direction="Left" :title="infos.title + '进尺分析'">
    <!-- 内容区 -->
    <div slot="content" class="MainCoal-box-content">
      <div class="content-item-box">
        <div class="content-item" style="padding-bottom: 0 ;">
          <div class="top-left">
            <span class="top-left-span">今日进尺</span>
            <div>
              <span class="top-right-num-v2">11</span>
              <span class="company" style="margin-right:2.5rem;">米</span>
            </div>
          </div>
          <div class="top-left">
            <span class="top-left-span">月累进尺</span>
            <div>
              <span class="top-right-num-v2">423</span>
              <span class="company">米</span>
            </div>
          </div>
        </div>
        <div class="content-item-bottom">
          {{infos.title}}设计巷道宽度为{{infos.height}}米
        </div>
      </div>
      <div class="content-center">
        <MouldBoxV3
          :datas="data"
          class="mouldbox-v3"
          chartTitle="近七天进尺统计"
          :chartOption="{
            color:['#1B74D2'],
            area: false,
            unit: '米'
          }"
          height="8.625rem"
        />
        <mould-box
          :datas="data"
          class="mouldbox"
          chartTitle="近30天进尺分析"
          :chartOption="chartOption"
          :text="['进尺']"
          height="7.25rem"
        />
      </div>
    </div>
  </HerinContainer>
</template>

<script>
import HerinContainer from '@/components/HerinContainer';
import MouldBox from '../common/MouldBox.vue';
import MouldBoxV3 from '../common/MouldBoxV3.vue';
import { pumpMapList } from '../common/titles';

export default {

  components: {
    HerinContainer,
    MouldBox,
    MouldBoxV3
  },
  data() {
    return {
      chartOption: {
        color: ['#00F9FC'],
        area: false,
        unit: '米'
      },
      data: [
        { x: '12-01', y: 75, s: '进尺' },
        { x: '12-06', y: 30, s: '进尺' },
        { x: '12-11', y: 60, s: '进尺' },
        { x: '12-16', y: 37, s: '进尺' },
        { x: '12-21', y: 79, s: '进尺' },
        { x: '12-26', y: 42, s: '进尺' },
        { x: '12-31', y: 67, s: '进尺' }
      ],
      pumpMapList: []
    };
  },
  computed: {
    lists() {
      const data = [
        { title: '地面负荷', num: '9,826' },
        { title: '用电负荷率', num: '43.1%' },
        { title: '供电状态', num: '运行' }
      ];
      return data;
    },
    infos() {
      const info = {};
      const id = this.$route.params.id;
      if (this.pumpMapList && this.pumpMapList.length > 0) {
        info.title = this.pumpMapList.find(item => id === item.id).value;
        info.height = this.pumpMapList.find(item => id === item.id).height;
      }
      return info;
    }
  },
  mounted() {
    this.pumpMapList = pumpMapList;
  },
  methods: {
  }
};
</script>

<style lang='scss' scoped>
.MainCoal-box{
  &-content{
    .company{
      color: #838383;
      font-size: .75rem;
      height: .875rem;
    }
    .content-item-box{
      width:20.625rem ;
      margin-bottom: .9375rem;
      border-radius: .25rem;
      display: flex;
      flex-direction: column;
      background-color: #1D2E45;
      padding: .9375rem .9375rem .5625rem;
      box-sizing: border-box;
      .content-item{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .top-left{
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 50%;
          height: 1.125rem;
        }
        .top-left-span{
          font-size: .875rem;
          color: #F8F8F8;
          vertical-align:middle;
        }
        .top-right-num-v2{
          color: #00FDFF;
          font-size: 1rem;
          margin-right: .625rem;
        }
      }
      .content-item-bottom{
        margin-top: .3125rem;
        color: #ADADAD;
        font-size: .875rem;
      }
    }
    .content-center{
      .mouldbox-v3{
        margin-bottom:.625rem;
      }
    }
  }
}
</style>
